<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文件拖拽上传</title>
	<script type="text/javascript" src="js/jquery-1.11.2.js"></script>
	<style type="text/css">
		.uploadBox{width: 300px;height: 200px;margin: 0 auto;margin-top: 100px;border:1px dashed #ccc;font-size: 12px;}
		.uploadBox:hover{cursor: pointer;}
		.uploadBox .tip{height:200px;line-height: 200px;margin:0;padding: 0; text-align: center;}
	</style>
	<script type="text/javascript">
		$(function(){
			var targetBox = $(".uploadBox");
			$("#tip2").hide();

			targetBox.hover(function() {
				$("#tip1").hide();
				$("#tip2").show();
			}, function() {
				$("#tip1").show();
				$("#tip2").hide();
			});

			// 去除浏览器本身的效果
			$(document).on({
				dragleave:function(e){ // 脱离
					e.preventDefault();
				},
				drop:function(e){   // 拖放后
					e.preventDefault();
				},
				dragenter:function(e){ // 拖进
					e.preventDefault();
				},
				dragover:function(e){
					e.preventDefault();
				}
				
			});

			// var tgBox = document.getElementById('targetBox');
			targetBox[0].addEventListener("drop",function(e){
				e.preventDefault(); // 取消浏览器默认效果
				var fileList = e.dataTransfer.files;
				// alert(fileList.length);

				if(fileList.length == 0)
				{
					return;
				}

				alert("--"+fileList[0]);
				xhr = new XMLHttpRequest();
				xhr.open("post","test.php",true);
				xhr.setRequestHeader("X-Requested-Width","XMLHttpRequest")

				var fd = new FormData();
				fd.append('ff',fileList[0]);

				xhr.send(fd);
			});

		})

		
	</script>
</head>
<body>
	<div class="uploadBox" id="targetBox">
		<p class="tip" id="tip1">拖动图片到这里</p>
		<p class="tip" id="tip2">点击上传图片</p>
	</div>
</body>
</html>